<!--
 * @Author: zwx
 * @Date: 2024-06-01 19:56:25
 * @LastEditors: zwx
 * @LastEditTime: 2024-06-09 21:54:40
 * @Description: 
-->
<template>
    <div>
        <div class="daohang_content">
            <PersButton type="text" size="mini" icon="el-icon-goback" perms="sys:role:del" label="返回上一页"
                @click="goback"></PersButton>
        </div>
        <panle title='用户数据详情'></panle>

        <div class="userinfo_content">
            <div class="userinfo_content_left">
                <user-detail ref="userdetail" :liveId="liveId" :live_user_id="live_user_id"></user-detail>
            </div>
            <div class="userinfo_content_right">
                <el-tabs v-model="activeName" @tab-click="dianji_tab">
                    <el-tab-pane label="课程购买记录" name="paycourse">
                        <pay-course ref="paycourse" v-if="activeName == 'paycourse'" :fliter="fliter" :tab="tab"
                            :liveId="liveId" :live_user_id="live_user_id"></pay-course>
                    </el-tab-pane>
                    <el-tab-pane label="点击事件" name="shijian">
                        <shi-jian ref="shijian" v-if="activeName == 'shijian'" :tab="tab" :liveId="liveId"
                            :live_user_id="live_user_id"></shi-jian>
                    </el-tab-pane>
                    <el-tab-pane label="在线记录" name="jilu">
                        <ji-lu ref="jilu" v-if="activeName == 'jilu'" :tab="tab" :liveId="liveId"
                            :live_user_id="live_user_id"></ji-lu>
                    </el-tab-pane>
                    <el-tab-pane label="评论" name="pinglun">
                        <ping-lun-user ref="pinglun" v-if="activeName == 'pinglun'" :tab="tab" :liveId="liveId"
                            :live_user_id="live_user_id"></ping-lun-user>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>

    </div>
</template>


<script>

import UserDetail from './components/UserDetail.vue';
import PayCourse from './components/PayCourse.vue';
import ShiJian from './components/ShiJian.vue';
import JiLu from './components/JiLu.vue';
import PingLunUser from './components/PingLunUser.vue';

import Panle from '@/components/Panle';
import PersButton from '@/components/PersButton';


export default {
    components: {
        Panle,
        UserDetail,
        PayCourse,
        ShiJian,
        JiLu,
        PingLunUser,
        PersButton
    },
    data() {

        return {
            upurl: '',
            fliter: this.$route.query.fliter,
            liveId: this.$route.query.liveId,
            live_user_id: this.$route.query.live_user_id,
            tab: this.$route.query.tab,
            activeName: this.$route.query.tab ? this.$route.query.tab : 'paycourse',

        }

    },
    created() {

    },
    methods: {
        dianji_tab(tab, event) {
            console.log('dianji_tab');
            console.log(this.activeName);
            this.activeName = tab.name;
        },
        goback() {
            this.$router.go(-1);
        }
    }

}

</script>




<style>
.userinfo_content {
    display: flex;
    width: 100%;
}

.userinfo_content_left {
    width: 25%;
}

.userinfo_content_right {
    width: 75%;
    margin-left: 50px;
}

.daohang_content {
    height: 30px;
    display: flex;
    align-content: center;
    padding-top: 20px;

}
</style>
